#topbar {
    margin-left: 32%;
}

#topbar a {
    margin: 0 15px;
    background-color: #e7e7e7;
    color: #999;
}

#topbar a::before {
    content: "";
    position: absolute;
    margin-top: -15px;
    border-width: 25px 0px 25px 25px;
    border-style: solid;
    border-color: #e7e7e7 #e7e7e7 #e7e7e7 transparent;
    left: -25px;
    height: 100%;
}

#topbar a::after {
    content: "";
    position: absolute;
    margin-top: -15px;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid #e7e7e7;
    right: -25px;
}

#topbar a:hover,
#topbar a.passed:hover {
    background-color: #337ab7;
    color: #eee;
}

#topbar a:hover::before,
#topbar a.passed:hover::before {
    border-color: #337ab7 #337ab7 #337ab7 transparent;
}

#topbar a:hover::after,
#topbar a.passed:hover::after {
    border-left: 25px solid #337ab7;
}

#topbar a.passed {
    background-color: #9de3a0;
    color: #fff;
}

#topbar a.passed::before {
    border-color: #9de3a0 #9de3a0 #9de3a0 transparent;
}

#topbar a.passed::after {
    border-left: 25px solid #9de3a0;
}

#topbar a.cur {
     background-color: #5cb85c;
     color: #fff;
}

#topbar a.cur::before {
    border-color: #5cb85c #5cb85c #5cb85c transparent;
}

#topbar a.cur::after {
    border-left: 25px solid #5cb85c;
}


